<template>
	<view class="sort__-content">
		<view class="right-content">
			<!-- <view class="item" @tap="activeTitle = 0" :class="activeTitle == 0 ? 'active-item' : ''">新鲜题册</view>
			<view class="item" @tap="activeTitle = 1" :class="activeTitle == 1 ? 'active-item' : ''">居家刷题</view>
			<view class="item" @tap="activeTitle = 2" :class="activeTitle == 2 ? 'active-item' : ''">速效提升</view> -->
			<view class="item" @tap="activeTitle = index" :class="activeTitle == index ? 'active-item' : ''" v-for="(item,index) in sortTable">{{item.cate_name}}</view>
		</view>
		<!-- 商品列表 -->
		<scroll-view scroll-y="true" class="left-content">
			<view class="container" v-for="(item,index) in sortGoods">
				<swiper class="head-banner" indicator-dots="true" circular="true" autoplay="true" interval="3000">
					<swiper-item v-for="v in 5">{{v}}</swiper-item>
				</swiper>
				<view class="title">
					{{item.cate_name}}
				</view>
				<view v-if="item.goods.length==0">暂无商品</view>
				<view class="commodity-content" v-for="(item2,index2) in item.goods" v-if="item.goods.length!=0">
					<image class="picture" :src="item2.mainImg?item2.mainImg:defimg" mode="aspectFill"/>
					<view class="message-content">
						<view class="message-title">{{item2.goods_name}}</view>
						<view class="sold-count">销量{{item2.sales}}份</view>
						<view class="price-buy">
							<view class="price">￥{{item2.price}}</view>
							<view class="old-price">￥{{item2.original_price}}</view>
							<view class="buy-btn" @click="changeGuige(item2)">选规格</view>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
		<!-- 选择规格 -->
		<view class="commodity-detail" v-if="showCommodityDetail" @tap="showCommodityDetail = false">
			<view class="content" @tap.stop="">
				<view class="close" @tap="showCommodityDetail = false">x</view>
				<image class="commodity-image" :src="DesGood.mainImg?DesGood.mainImg:defimg" mode="aspectFill"></image>
				<view class="d-title">{{DesGood.goods_name}}</view>
				<view class="d-small-title">{{DesGood.goods_subname}}</view>
				<view class="d-sold-count">销量{{DesGood.sales}}份</view>
				<scroll-view scroll-y="true" style="height: 90px;">
					<specOption v-for="(item,index) in DesGood.spec" @event="optionChange" :key="index" :optionKey="index" v-model="optionId[index]" :spec="item.spec_name" :items="item.detail"/>
				</scroll-view>
				<view class="car-content">
					<view class="count-content">
						<view class="price" v-if="DesPrice=='请选择规格'">{{DesPrice}}</view>
						<view class="price" v-if="DesPrice!='请选择规格'">￥{{DesPrice*num}}</view>
						<!-- <view class="old-price">￥{{DesGood.original_price}}</view> -->
						<view class="minus iconfont iconiconless" @tap="num>=2?num--:num"></view>
						<input type="number" v-model="num" class="count-number"></input>
						<view class="add iconfont iconjia" @tap="num++"></view>
					</view>
					<view class="add-btn" :style="{'background':isAll? '#E6B873':'#CDCDCD'}" @tap="isAll?joinShopCar(DesGood):''">加入购物车</view>
				</view>
			</view>
		</view>
		<!-- 购物车 -->
		<view class="car-detail-content" @tap="showCarDetail = false" v-if="showCarDetail">
			<view class="car-detail" @tap.stop="">
				<view class="head-content">
					<label class="change-all">
						<radio class="raio-all" color="#F37B1D" :checked="allboo" @tap="allChecked"></radio>
						全选
					</label>
					<view class="iconfont iconshanchu" @tap="delGoodCar">删除商品</view>
				</view>
				<scroll-view scroll-y="true" class="commodity-amount-content">
					<view class="commodity-amount" v-for="(item,index) in shopCarList">
						<radio :checked="item.radio == 1" color="#F37B1D" @tap="goodChecked(item)"></radio>
						<image :src="item.goods.mainImg?item.goods.mainImg:defimg" mode="aspectFill"></image>
						<view class="message-content">
							<view class="title">{{item.goods.goods_name}}</view>
							<view class="small-title">{{item.spec_price.spec_name}}</view>
							<view class="price-amount">
								<view class="price">￥{{item.spec_price.cost}}</view>
								<view class="minus iconfont iconiconless" @tap="jian(item)"></view>
								<input type="number" v-model="item.num" class="count-number"></input>
								<view class="add iconfont iconjia" @tap="jia(item)"></view>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
		<view class="car-message" v-if="showCar">
			<view class="car-icon iconfont icongouwuche" @tap="showCarDetail = true">
				<view class="commodity-count">{{shopCarList.length}}</view>
			</view>
			<view class="price">￥{{this.sumPrice}}</view>
			<view class="go-pay">去结算</view>
		</view>
		<floating-ball></floating-ball>
	</view>
</template>

<script>
	import floatingBall from '../../components/floating-ball-menu/floating-ball-menu.vue'
	import specOption from "@/components/goodsMsg/specOption.vue";
	import util from "@/common/util.js";
	export default {
		components: {
			floatingBall,
			specOption
		},
		data() {
			return {
				activeTitle: 0, // 左侧菜单栏下标
				showCommodityDetail: false, //是否显示商品选择详情
				yearItemIndex: 0, // 选择中的商品规格
				showCarDetail: false, //购物车详情
				showCar: true, //底部购物车
				sortTable:[], //左侧分类表
				sortGoods:[], //分类商品信息
				DesGood:[], //规格商品
				num:1, //商品数量
				shopCarGood:null, //要加入购物车的商品
				isAll: false, //商品规格全选
				DesPrice:'请选择规格', //实际消费价格
				spec_price_id:0, //规格组合价格
				goods_id:null, //规格组合商品ID
				optionId: [], //商品ID组合
				shopCarList:[], //购物车列表
				sumPrice:0, //结算价格
				allboo:false, //全选状态
			}
		},
		created() {
			this.sortTab()
			this.shopCar()
		},
		methods: {
			// 商品分类表
			sortTab(){
				this.$shopApi.apiPost('font/goods/cate/goods').then(res => {
					const DATA = res.data
					if(DATA.code == 200){
						//商品主图
						for (var i = 0; i < DATA.data.goods.length; i++) {
							for (var j = 0; j < DATA.data.goods[i].goods.length; j++) {
								if(DATA.data.goods[i].goods[j].images.length!=0){
									DATA.data.goods[i].goods[j].mainImg = this.util.getMainImage(DATA.data.goods[i].goods[j].images)
								}else{
									DATA.data.goods[i].goods[j].mainImg = this.defimg
								}
							}
						}
						this.sortTable = DATA.data.cate
						this.sortGoods = DATA.data.goods
						console.log('分类',this.sortTable);
						console.log('商品',this.sortGoods);
						console.log('DATA',DATA);
					}
				})
			},
			// 选择规格
			changeGuige(item) {
				//加入购物车按钮状态
				this.isAll = false
				//加入购物车数量
				this.num = 1
				//加入购物车价格
				this.DesPrice = '请选择规格'
				//加入购物车规格组合ID
				this.optionId = []
				//选择规格弹窗
				this.showCommodityDetail = true
				console.log('规格',item);
				this.DesGood = item
			},
			// 选中规格
			handelGuige(e) {
				this.yearItemIndex = e
				console.log('选中了第' + e + '个规格');
			},
			//加入购物车
			joinShopCar(item){
				//购物车ID
				let unid = null
				//购物车数量
				let num = 0
				//选中该商品的规格是否在购物车，true修改购物车数量，false添加购物车
				let flag = false
				for (var i = 0; i < this.shopCarList.length; i++) {
					if(item.unid == this.shopCarList[i].goods_id&&this.spec_price_id == this.shopCarList[i].spec_price_id){
						unid = this.shopCarList[i].unid
						num = this.shopCarList[i].num
						if(this.optionId.toString() == this.spec_price_id){
							flag = true
						}
					}
				}
				console.log(flag);
				if(flag == true){
					if(unid){
						let resData = {
							unid:unid,
							goods_id:this.goods_id,
							num:num+this.num,
							spec_price_id:this.spec_price_id
						}
						console.log(resData);
						this.$shopApi.apiPost('font/car/save',resData).then(res => {
							console.log(res);
							const DATA = res.data
							if(DATA.code == 200){
								this.shopCar()
								//选择规格弹窗
								this.showCommodityDetail = false
								this.util.showDialog('加入购物车成功！')
								
							}else{
								//选择规格弹窗
								this.showCommodityDetail = false
								this.util.showDialog('加入购物车失败！')
							}
						})
					}
				}else{
					let resData = {
						goods_id:this.goods_id,
						num:this.num,
						spec_price_id:this.spec_price_id
					}
					this.$shopApi.apiPost('font/car/save',resData).then(res => {
						console.log('res',res);
						const DATA = res.data
						if(DATA.code == 200){
							this.shopCar()
							//选择规格弹窗
							this.showCommodityDetail = false
							this.util.showDialog('加入购物车成功！')
							
						}else{
							//选择规格弹窗
							this.showCommodityDetail = false
							this.util.showDialog('加入购物车失败！')
						}
					})
				}
			},
			optionChange: function(id, key) {
				this.optionId[key] = id
				this.isAll = false;
				if(this.optionId.length == this.DesGood.spec.length){
					//商品规格组合ID排序,从小到大
					this.optionId = this.optionId.sort()
					this.isAll = true;
					//商品规格价格
					this.DesPrice = this.util.spec(this.optionId,this.DesGood).cost
					//商品规格ID
					this.spec_price_id = this.util.spec(this.optionId,this.DesGood).unid
					//商品规格对应的商品ID
					this.goods_id = this.util.spec(this.optionId,this.DesGood).goods_id
					console.log(this.util.spec(this.optionId,this.DesGood));
					console.log(this.DesPrice);
				}
				console.log(this.optionId);
			},
			//购物车
			shopCar(){
				this.sumPrice = 0
				this.$shopApi.apiPost('font/car/infos').then(res => {
					const DATA = res.data
					if(DATA.code == 200){
						//获取主图
						for (var i = 0; i < DATA.data.list.length; i++) {
							//false未选中，true选中
							DATA.data.list[i].radio = false
							if(DATA.data.list[i].goods.images.length!=0){
								DATA.data.list[i].goods.mainImg = this.util.getMainImage(DATA.data.list[i].goods.images)
							}else{
								DATA.data.list[i].goods.mainImg = this.defimg
							}
							console.log(DATA.data.list[i].spec_price);
							this.sumPrice+=parseInt(DATA.data.list[i].num*DATA.data.list[i].spec_price.cost)
						}
						this.shopCarList = DATA.data.list
						console.log('购物车',this.shopCarList);
					}
				})
			},
			//修改购物车数量++
			jia(item){
				item.num++
				this.sumPrice = this.sumPrice+parseInt(item.spec_price.cost)
				let resData = {
					unid:item.unid,
					goods_id:item.goods.unid,
					num:item.num,
					spec_price_id:item.spec_price_id
				}
				this.$shopApi.apiPost('font/car/save',resData).then(res => {
					console.log(res);
				})
			},
			//修改购物车数量--
			jian(item){
				if(item.num>=2){
					item.num--
					this.sumPrice = this.sumPrice-item.spec_price.cost
				}else{
					item.num
				}
				let resData = {
					unid:item.unid,
					goods_id:item.goods.unid,
					num:item.num,
					spec_price_id:item.spec_price_id
				}
				this.$shopApi.apiPost('font/car/save',resData).then(res => {
					console.log(res);
				})
			},
			//选中购物车的商品
			goodChecked(item){
				//true为false，false为true
				item.radio = !item.radio
				console.log('选中',item);
				console.log('购物车',this.shopCarList);
			},
			//删除购物车选中的商品
			delGoodCar(){
				//选中的购物车商品
				let arr = []
				let resData = {}
				for (var i = 0; i < this.shopCarList.length; i++) {
					if(this.shopCarList[i].radio == true){
						arr.push(this.shopCarList[i].unid)
					}
				}
				resData.unid = arr
				this.$shopApi.apiPost('font/car/delete',resData).then(res => {
					const DATA = res.data
					if(DATA.code == 200){
						this.util.showDialog('删除成功！')
						this.shopCar()
					}else{
						this.util.showDialog('删除失败！')
					}
				})
			},
			//全选购物车商品
			allChecked(){
				//true为false，false为true
				this.allboo = !this.allboo
				for (var i = 0; i < this.shopCarList.length; i++) {
					// this.allboo等于true时,全部radio等于true
					// this.allboo等于false时,全部radio等于false
					if(this.allboo == true){
						this.shopCarList[i].radio = this.allboo
					}else{
						this.shopCarList[i].radio = this.allboo
					}
				}
			}
		},
		watch: {
			activeTitle() {
				console.log('类型改变');
				console.log(this.sortTable[this.activeTitle].unid);
				let unid = this.sortTable[this.activeTitle].unid
				let resData = {
					cate_id:unid
				}
				this.$shopApi.apiPost('font/goods/cate/goods',resData).then(res => {
					const DATA = res.data
					if(DATA.code == 200){
						for (var i = 0; i < DATA.data.goods.length; i++) {
							for (var j = 0; j < DATA.data.goods[i].goods.length; j++) {
								if(DATA.data.goods[i].goods[j].images.length!=0){
									DATA.data.goods[i].goods[j].mainImg = this.util.getMainImage(DATA.data.goods[i].goods[j].images)
								}else{
									DATA.data.goods[i].goods[j].mainImg = this.defimg
								}
							}
						}
						this.sortGoods = DATA.data.goods
						console.log(this.sortGoods);
						console.log('DATA',DATA);
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	/deep/ .__spec_item{
		padding-left: 0px;
	}
	
	.sort__-content {
		display: flex;
		height: 100vh;
		overflow: hidden;
		box-sizing: border-box;

		.right-content {
			height: 100vh;
			background-color: #FAFAFA;
			width: 200upx;
			overflow: hidden;
			box-sizing: border-box;

			.item {
				width: 100%;
				height: 80upx;
				line-height: 80upx;
				box-sizing: border-box;
				text-align: center;
				font-size: 28upx;
				font-family: Source Han Sans CN;
				font-weight: 500;
				color: #666666;
				opacity: 1;
				border-left: 10upx solid #FAFAFA;
			}

			.active-item {
				color: #333333;
				border-left: 10upx solid #E6B873;
			}
		}

		.left-content {
			width: calc(100% - 200upx);
			height: 100vh;
			background-color: #FFFFFF;
			padding: 0 24upx;
			padding-bottom: 80upx;
			box-sizing: border-box;

			.container {
				margin-bottom: 40upx;

				.head-banner {
					width: 100%;
					height: 150upx;
					background-color: #FAFAFA;
				}

				.title {
					margin-top: 40upx;
					font-size: 28upx;
					font-family: Source Han Sans CN;
					font-weight: 500;
					color: #333333;
					opacity: 1;
				}

				.commodity-content {
					margin-top: 30upx;
					display: flex;

					.picture {
						width: 140upx;
						height: 140upx;
						background-color: #F5F3F4;
						border-radius: 10upx;
					}

					.message-content {
						margin-left: 20upx;
						width: calc(100% - 160upx);

						.message-title {
							width: 100%;
							overflow: hidden;
							white-space: nowrap;
							text-overflow: ellipsis;
							font-size: 26upx;
							font-family: Source Han Sans CN;
							font-weight: 500;
							line-height: 38upx;
							color: #333333;
							opacity: 1;
						}

						.sold-count {
							margin-top: 10upx;
							font-size: 24upx;
							font-family: Source Han Sans CN;
							font-weight: 500;
							line-height: 34upx;
							color: #999999;
							opacity: 1;
						}

						.price-buy {
							display: flex;
							margin-top: 8upx;
							height: 40upx;
							line-height: 40upx;

							.price,
							.old-price {
								font-size: 28upx;
								font-family: Source Han Sans CN;
								font-weight: 500;
								line-height: 34upx;
								color: #E43841;
								opacity: 1;
							}

							.old-price {
								font-size: 24upx;
								font-weight: 400;
								color: #999999;
								margin-left: 20upx;
							}

							.buy-btn {
								margin-left: auto;
								width: 100upx;
								height: 40upx;
								line-height: 40upx;
								background: #E6B873;
								opacity: 1;
								border-radius: 20upx;
								text-align: center;
								font-size: 24upx;
								font-family: Source Han Sans CN;
								font-weight: 400;
								color: #FFFFFF;
							}
						}
					}
				}
			}
		}

		.commodity-detail {
			width: 100%;
			height: 100vh;
			position: fixed;
			top: 0;
			left: 0;
			z-index: 1001;
			background: rgba(0, 0, 0, 0.5);

			.content {
				width: 680upx;
				height: 1080upx;
				background-color: #FFFFFF;
				position: absolute;
				top: 50%;
				left: 50%;
				margin: -540upx 0 0 -340upx;
				opacity: 1;
				border-radius: 10upx;
				padding: 20upx;
				padding-bottom: 0;
				box-sizing: border-box;

				.close {
					width: 40upx;
					height: 40upx;
					line-height: 40upx;
					border-radius: 20upx;
					background-color: #CDCDCD;
					position: absolute;
					right: 40upx;
					top: 40upx;
					text-align: center;
					color: #F5F3F4;
					z-index: 9;
				}

				.commodity-image {
					width: calc(100%);
					height: 540upx;
					background-color: #F5F3F4;
					border-radius: 10upx;
					margin: auto;
				}

				.d-title {
					margin-top: 20upx;
					width: 100%;
					overflow: hidden;
					text-overflow: ellipsis;
					font-size: 28upx;
					font-family: Source Han Sans CN;
					font-weight: bold;
					line-height: 40upx;
					color: #333333;
					opacity: 1;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 2;
				}

				.d-small-title,
				.d-sold-count,
				.d-year {
					font-size: 24upx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #AE7A1F;
					opacity: 1;
					margin-top: 12upx;
				}

				.d-sold-count {
					color: #999999;
				}

				.d-year {
					font-size: 28upx;
					font-weight: bold;
					color: #333333;
					margin-top: 20upx;
				}

				.d-year-content {
					display: flex;
					justify-content: start;

					.d-year-item {
						width: 84upx;
						height: 60upx;
						line-height: 60upx;
						text-align: center;
						border-radius: 30upx;
						background-color: #E7E7E7;
						margin-right: 16upx;
						color: #999999;
						font-size: 28upx;
						font-weight: 400;
					}

					.d-year-item-active {
						background-color: #E6B873;
						color: #FFFFFF;
					}
				}

				.car-content {
					position: absolute;
					bottom: 0;
					left: 0upx;
					width: 100%;
					height: 180upx;
					background: #FFFFFF;
					box-shadow: 0px -1px 6px rgba(0, 0, 0, 0.16);
					opacity: 1;
					border-radius: 0px 0px 5px 5px;
					padding: 40upx 30upx 20upx 24upx;
					box-sizing: border-box;

					.count-content,
					.old-price {
						display: flex;
						height: 48upx;
						line-height: 48upx;
					}

					.price {
						font-size: 32upx;
						font-family: Source Han Sans CN;
						font-weight: 500;
						line-height: 48upx;
						color: #E43841;
						opacity: 1;
					}

					.old-price {
						font-size: 24upx;
						color: #999999;
					}

					.minus,
					.add {
						width: 36upx;
						height: 36upx;
						line-height: 36upx;
						border-radius: 18upx;
						font-size: 36upx;
						font-weight: bold;
						text-align: center;
						color: #E7E7E7;
						font-size: 36upx;
					}

					.minus {
						margin-left: auto;
					}

					.count-number {
						width: 90upx;
						padding: 0;
						margin: 0;
						height: 36upx;
						line-height: 36upx;
						box-sizing: border-box;
						text-align: center;
						font-size: 24upx;
						color: #333333;
					}

					.add {
						color: #E6B873;
					}
				}
				 
				.add-btn {
					width: 610upx;
					height: 60upx;
					line-height: 60upx;
					background: #CDCDCD;
					opacity: 1;
					border-radius: 30upx;
					text-align: center;
					font-size: 28upx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #FFFFFF;
					opacity: 1;
					margin-top: 12upx;
				}
			}
		}

		.car-message {
			position: absolute;
			top: calc(100% - 80upx);
			left: 0;
			width: 100%;
			height: 80upx;
			display: flex;
			z-index: 99;
			box-sizing: border-box;

			.car-icon {
				position: absolute;
				width: 84upx;
				height: 84upx;
				background: #E6B873;
				border: 8upx solid #646464;
				border-radius: 50%;
				line-height: 84upx;
				text-align: center;
				color: #FFFFFF;
				opacity: 1;
				font-size: 46upx;
				left: 50upx;
				bottom: 4upx;

				.commodity-count {
					position: absolute;
					color: #FFFFFF;
					right: -10upx;
					top: -20upx;
					width: 40upx;
					height: 40upx;
					font-size: 24upx;
					line-height: 40upx;
					border-radius: 40upx;
					text-align: center;
					font-weight: 400;
					background-color: #E43841;
				}
			}

			.price {
				width: 550upx;
				line-height: 80upx;
				background-color: #5D5E5E;
				color: #FFFFFF;
				font-size: 32upx;
				font-weight: 400;
				text-align: center;
			}

			.go-pay {
				width: calc(100% - 550upx);
				background-color: #EAB867;
				font-size: 28upx;
				font-weight: 400;
				color: #FFFFFF;
				line-height: 80upx;
				text-align: center;
			}
		}

		.car-detail-content {
			width: 100%;
			height: 100%;
			position: absolute;
			background-color: rgba(0, 0, 0, 0.5);

			.car-detail {
				position: absolute;
				bottom: 80upx;
				width: 100%;
				height: 700upx;
				box-sizing: border-box;
				background-color: #FFFFFF;

				.head-content {
					display: flex;
					padding: 30upx;
					border-bottom: 2upx solid #E7E7E7;
					box-sizing: border-box;

					.change-all {
						font-size: 26upx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: #333333;
						opacity: 1;

						.raio-all {
							transform: scale(0.8);
						}
					}

					.iconshanchu {
						margin-left: auto;
						font-size: 26upx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: #999999;
						line-height: 48upx;
						opacity: 1;
					}
				}

				.commodity-amount-content {
					width: 100%;
					height: 670upx;
					padding-bottom: 100upx;
					box-sizing: border-box;
				}

				.commodity-amount {
					padding: 30upx;
					display: flex;

					radio {
						line-height: 160upx;
						transform: scale(0.6);
					}

					image {
						width: 160upx;
						height: 160upx;
						background-color: #F5F3F4;
						border-radius: 10upx;
					}

					.message-content {
						width: 450upx;
						margin-left: 30upx;

						.title {
							font-size: 26upx;
							font-family: Source Han Sans CN;
							font-weight: 400;
							line-height: 38upx;
							color: #333333;
							opacity: 1;
							overflow: hidden;
							text-overflow: ellipsis;
							display: -webkit-box;
							-webkit-box-orient: vertical;
							-webkit-line-clamp: 2;
						}

						.small-title {
							font-size: 24upx;
							font-family: Source Han Sans CN;
							font-weight: 500;
							line-height: 34upx;
							color: #999999;
							opacity: 1;
							margin-top: 20upx;
						}

						.price-amount {
							display: flex;
							margin-top: 20upx;

							.price {
								font-size: 32upx;
								font-family: Source Han Sans CN;
								font-weight: 500;
								line-height: 48upx;
								color: #E43841;
								opacity: 1;
							}

							.old-price {
								font-size: 24upx;
								color: #999999;
							}

							.minus,
							.add {
								width: 36upx;
								height: 36upx;
								line-height: 36upx;
								border-radius: 18upx;
								font-size: 36upx;
								font-weight: bold;
								text-align: center;
								color: #E7E7E7;
								font-size: 36upx;
							}

							.minus {
								margin-left: auto;
							}

							.count-number {
								width: 90upx;
								padding: 0;
								margin: 0;
								height: 36upx;
								line-height: 36upx;
								box-sizing: border-box;
								text-align: center;
								font-size: 24upx;
								color: #333333;
							}

							.add {
								color: #E6B873;
							}
						}
					}
				}
			}
		}
	}
</style>
